<template>
    <view class="address-page">
        <view class="list-container">
            <view class="item" v-for="(item,index) in list" :key="index">
                <view class="info">
                    <view class="name-and-mobile">
                        <text>{{item.name}}</text>
                        <text>{{item.mobile}}</text>
                    </view>
                    <view class="address">
                        {{item.provinceName}}&nbsp;{{item.cityName}}&nbsp;{{item.districtName}}&nbsp;{{item.fullAddress}}
                    </view>
                </view>
                <view class="active">
                    <view class="check-wrapper"><sp-checkbox :checked="item.isDefault" :canCancel="false" @change="handelChangeDefault(item.addressId)"></sp-checkbox><text>{{item.isDefault?'默认':'选择'}}</text></view>
                    <view class="active-wrapper">
                        <view @click="nav(`/subpackage/order/pages/address/edit?id=${item.addressId}`)"><uni-icons type="compose" size="20"></uni-icons>编辑</view>
                        <view @click="handelDelete(item.addressId)"><uni-icons type="trash" size="20"></uni-icons>删除</view> 
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="add-button" @click="nav('/subpackage/order/pages/address/add')">添加新地址</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { get } from "@/libs/request"
import { nav } from "@/libs/utils"
import { onShow } from "@dcloudio/uni-app"
const list = ref<any>([]);
/**
 * 获取列表
 */
const getList = ()=>{
    get("userAddress/getList").then((res:any)=>{
        if(res.errCode==0){
            list.value = res.data;
        }
    })
}
/**
 * 点击删除按钮
 */
const handelDelete = (addressId:number)=>{
    get(`userAddress/delete/${addressId}`).then((res:any)=>{
        if(res.errCode==0){
            getList();
        }
    })
}
/**
 * 修改默认
 * @param addressId 
 */
const handelChangeDefault = (addressId:number)=>{
    get(`userAddress/editDefault/${addressId}`).then((res:any)=>{
        if(res.errCode==0){
            getList();
        }
    })
}
onShow(()=>{
    getList();
})
</script>
<style scoped lang="less">
.address-page{
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
    padding:30rpx 20rpx 120rpx;
    .list-container{
        .item{
            border-radius: 25rpx;
            padding: 20rpx;
            background: #FFFFFF;
            margin-bottom: 20rpx;
            .info{
                padding-bottom: 10rpx;
                .name-and-mobile{
                    margin-bottom: 10rpx;
                    text{
                        margin-right: 10rpx;
                    }
                }
            }
            .active{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 80rpx;
                border-top: 1px solid #d6d6d652;
                font-size: 30rpx;
                .check-wrapper{
                    display: flex;
                    align-items: center;
                    text{
                        margin-left: 10rpx;
                    }
                }
                .active-wrapper{
                    display: flex;
                    align-items: center;
                    view{
                        margin-left: 10rpx;
                    }
                }
            }
        }
    }
    .footer{
        position: fixed;
        bottom: 20rpx;
        width: 100%;
        .add-button{
            width: 95%;
            height: 90rpx;
            line-height: 90rpx;
            background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
            color: #FFFFFF;
            text-align: center;
            border-radius: 50rpx;
        }
    }
}
</style>